.org-structure-roles{
  position: relative;
  background: $background-title;
  padding: 10px;
  min-width: 585px;
  display: block;
  .clear{
    clear: both;
  }
  .f-left{
    float: left;
  }
  .f-right{
    float: right;
  }
  .roles-title-wrap{
    line-height: 32px;
    font-size: 16px;
    .roles-code-wrap{
      height: 50px;
    }
    .roles-code-wrap1{
      height: 40px;
    }
    .red-star{
      font-family: SimSun;
      color: $default-color-inverse;
    }
    .inactive-date-wrap{
      color: $default-color-inverse;
    }
    .roles-title{
      //width: 25%;
      text-align: right;
      color: $font-default;
    }
    #code-input{
      width: 260px;
      border-radius: 4px;
    }
    .roles-title-text{
      color: #333;
      margin-right: 20px;
      display: block;
      height: 37px;
      padding-left: 8px;
      width: 270px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .roles-title-text-disabled{
      background: $form-bg-disabled;
      border: solid 1px $form-border;
      -moz-user-select:none;
      -webkit-user-select:none;
      -ms-user-select:none;
      -khtml-user-select:none;
      user-select:none;
    }
  }
  .roles-wrap{
    .role-item{
      float: left;
      margin-right: 2px;
      margin-top: 2px;
      width: 230px;
      line-height: 32px;
      font-size: 14px;
      overflow: hidden;
      .role-item-position{
        float: left;
        margin-right: 8px;
        color: $font-default;
      }
      .role-item-user{
        float: left;
        color: $font-title;
      }
    }
  }

  //editing status
  .roles-wrap-editing{
    .role-item{
      float: left;
      margin-right: 10px;
      margin-top: 10px;
      width: 230px;
      line-height: 32px;
      font-size: 14px;
      overflow: hidden;
      cursor: pointer;
      .role-item-position{
        margin-right: 8px;
        color: $font-default;
        width: 230px;
        overflow: hidden;
      }
      .role-item-user{
        width: 200px;
        height: 32px;
        color: $font-title;
        border-radius: 4px;
        border: solid 1px $form-border;
        background: $background-white;
        .user-name{
          padding-left: 8px;
          width: 164px;
          height: 30px;
          .please-select{
            color: $font-disabled;
          }
        }
        .remove{
          width: 30px;
          height: 30px;
          text-align: center;
          cursor: pointer;
        }
        .remove:hover{
          color: $default-color-hover;
        }
      }
      .role-item-user:hover{
        border-color: $default-color;
      }
    }
    .role-item-disabled{
      .role-item-user{
        background: #f7f8fa;
      }
      .role-item-user:hover{
        border: solid 1px $form-border;
      }
    }
  }

  .extend-field-wrap{
    .extend-field-no-edit-wrap{
      .extend-field-title{
        font-size: 16px;
        font-weight: 500;
        margin-top: 6px;
      }
      .extend-field-list-wrap{
        .info-item{
          float: left;
          margin-right: 2px;
          margin-top: 2px;
          width: 230px;
          line-height: 32px;
          font-size: 14px;
          overflow: hidden;
          .info-item-title{
            float: left;
            margin-right: 8px;
            color: #898585;
          }
          .info-item-text{
            float: left;
            color: #333;
          }
        }
      }
    }
    .extend-field-edit-wrap{
      width: 400px;
      .extend-field-title{
        font-size: 16px;
        font-weight: 500;
        margin-top: 6px;
      }
      .ant-select{
        width: 100%;
      }
    }
    .btn-wrap{
      margin-top: 10px;
      text-align: right;
      Button{
        margin-right: 20px;
      }
    }
  }
}
